<template>
  <body>
  <div class="container">
    <el-form :inline="true" :model="formInline" :rules="rules" class="demo-form-inline">
      <h3>登录</h3>
      <br>
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="formInline.userName" class="input"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formInline.password" show-password class="input"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="formInline.code" class="input"></el-input>
      </el-form-item>
      <div>
        <el-image :src="url" @click="initCode"></el-image>
      </div>
      <el-checkbox v-model="formInline.rememberMe" style="margin:0px 0px 20px 0px;">记住密码</el-checkbox>
      <br>
      <el-form-item>
        <el-button type="primary" @click="login" class="btn">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  </body>
</template>

<script>
import {nanoid} from "nanoid";

const Base64 = require("js-base64").Base64
import Cookies from "js-cookie"

export default {
  name: "LoginView",
  data() {
    return {
      formInline: {
        userName: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      url: '',
      rules: {
        userName: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    login() {
      if (this.formInline.rememberMe) {
        let newPwd = Base64.encode(this.formInline.password);
        localStorage.setItem("username", this.formInline.userName);
        localStorage.setItem("password", newPwd);
        localStorage.setItem("rememberMe", this.formInline.rememberMe);
      } else {
        localStorage.removeItem("username")
        localStorage.removeItem("password")
        localStorage.removeItem("rememberMe")
      }
      this.axios.post("user/login/login", this.formInline).then(res => {
        if (res.data.code == 200) {
          this.$message.success("登录成功");
          localStorage.setItem("token", res.data.data.token);
          this.$router.push("/index");
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    initCode() {
      this.axios.get("user/login/getCode?uuid=" + this.uuid).then(res => {
        console.log(res);
        this.url = res.data.data.img;
      })
    }
  }, mounted() {
    let username = localStorage.getItem("username");
    if (username) {
      this.formInline.userName = localStorage.getItem("username");
      this.formInline.password = Base64.decode(localStorage.getItem("password"));
      this.formInline.rememberMe = true;
    }
  }, beforeMount() {
    let uuid = nanoid();
    this.uuid = uuid;
    sessionStorage.setItem("uuid", uuid);
    this.initCode();

  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  /* 对整个body进行设置 */
  min-height: 100vh;
  /* 将图片置于背景的中心位置。背景图片不会被重复，并且固定在视窗中不随滚动条的滚动而移动 */
  background: #e7e7e7 url("../assets/login.png") center no-repeat fixed;

  background-size: cover; /*设置背景图片的尺寸大小，使其随视窗大小的变化而自动调整，以覆盖整个背景区域。*/
  backdrop-filter: blur(2px); /* 设置背景的模糊效果*/
  /*弹性布局居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: white;
  border-radius: 0.7rem;
  /* 设置阴影效果，它的水平偏移量为 0，垂直偏移量为 0.9rem（即相对于元素的顶部距离），模糊半径为 1.7rem，颜色为 rgba(0, 0, 0, 0.25)。 */
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.26);
  height: 400px;
  max-width: 400px;
  overflow: hidden;
  position: relative; /*父元素进行定位*/
  width: 100%;
  opacity: 0.7;
}

.container-from {
  height: 100%;
  position: absolute; /*表单相对于container进行定位*/
  top: 0;
  transition: all 0.6s ease-in-out; /*设置动画效果适用于全部 0.6秒执行，平滑过渡*/
}

.btn {
  /* 对整个按钮的样式美化 */
  background-color: #f25d8e; /*背景颜色，阴影，弧度，文字颜色，鼠标样式，文字样式*/
  box-shadow: 0 4px 4px rgba(255, 112, 159, 0.3);
  border-radius: 6px;
  color: #e7e7e7;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  /* 属性设置字符间的间距为 0.1rem。这意味着文本中的字符将会相对于默认的间距稍微拉宽或缩小 */
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  /* 关于缓动函数，ease-in 是其中一种，它在动画开始时具有较慢的加速度，逐渐加快。除了 ease-in，还有很多其他的缓动函数可供选择，如 ease-out（慢慢变慢）、ease-in-out（加速再减速）等。 */
  /* transition 属性指定了过渡效果的属性、持续时间和缓动函数。具体来说，transform 是过渡效果应用到的 CSS 属性，80ms 是过渡效果的持续时间，ease-in 是过渡效果的缓动函数。 */
  transition: transform 80ms ease-in;
}


</style>